import hasOwnProperty from "../../shared/hasOwnProperty";
import { REACT_ELEMENT_TYPE } from "../../shared/ReactSymbols";

// import hasOwnProperty from "shared/hasOwnProperty";
// import { REACT_ELEMENT_TYPE } from "shared/ReactSymbols";

function hasValidKey(config) {
  return config.key !== undefined;
}

function hasValidRef(config) {
  return config.ref !== undefined;
}

const RESERVED_PROPS = {
  key: true,
  ref: true,
  __self: true,
  __source: true,
};

function ReactElement(type, key, ref, props) {
  // REACT 元素，也称虚拟DOM
  return {
    $$typeof: REACT_ELEMENT_TYPE,
    type, // h1 span div
    key, // 唯一标识
    ref, // 获取真实 DOM 元素
    props, // 当前元素的属性 childern, styl, id
  };
}

export function jsxDEV(type, config) {
  const props = {};
  let propName;
  let key = null;
  let ref = null;

  if (hasValidKey(config)) {
    key = config.key;
  }
  if (hasValidKey(config)) {
    ref = config.ref;
  }

  for (propName in config) {
    if (
      hasOwnProperty.call(config, propName) &&
      !RESERVED_PROPS.hasOwnProperty(propName)
    ) {
      props[propName] = config[propName];
    }
  }

  return ReactElement(type, key, ref, props);
}
